<template>
  <div class="table-box" v-loading="loading">
    <initTemplate></initTemplate>
  </div>
</template>
<script setup lang="tsx">
import { useInitConfig } from './hooks/use-initConfig';
import ProTable from '@/components/ProTable/index.vue';
import DialogForm from '@/components/DialogForm/index.vue';
import GlobalButton from '@/components/GlobalButton/index.vue';
import DialogTable from '@/components/DialogTable/index.vue';

import { TabsPaneContext } from 'element-plus';

const { init, mainData, loading, configPageParams, renderDynamicComponents, components } = useInitConfig();
onBeforeMount(() => {
  init();

  // setTimeout(() => {
  //   configPageParams.tableRefs.components.uploadFile.open();
  // }, 1500);
});

/**初始化模版  */
const initTemplate = () => {
  const { mainTableData, mainForms, detailsTableData, dialogTable } = mainData || {};
  // console.log(configPageParams, 'configPageParams', dialogTable);

  return (
    <>
      {!loading.value && (
        <>
          <ProTable
            ref={r => (configPageParams.tableRefs[mainTableData?.ref] = r)}
            tableAttrs={mainTableData.tableAttrs}
            columns={mainTableData.columns}
            request-api={mainTableData.requestApi}
            request-auto={mainTableData.requestAuto}
            initParam={mainTableData.initParam}
            pagination={mainTableData.pagination}
            // @ts-expect-error: Ignore type error for onRowClick
            onRowClick={mainTableData.rowClick}
            dataCallback={mainTableData.dataCallback}
          >
            {{
              tableHeader: () => <GlobalButton buttonList={mainTableData?.headButtonList} />,
              operation: ({ row }) => <GlobalButton buttonList={mainTableData?.rowButtonList} rowParams={row} />
            }}
          </ProTable>
          <div class='table-component'>{renderDynamicComponents(components, configPageParams)}</div>

          {dialogTable?.details?.map(d => (
            <DialogTable
              dialogAttrs={d.dialogAttrs}
              ref={r => (configPageParams.tableRefs[d.ref] = r)}
              columns={d.columns}
              request-api={d.requestApi}
              request-auto={d.requestAuto}
              initParam={d.initParam}
              pagination={d.pagination}
              data-callback={d.dataCallback}
              head-button-list={d?.headButtonList}
              row-buttonList={d?.rowButtonList}
            ></DialogTable>
          ))}
          {mainForms.formArr?.map((f, index) => (
            <DialogForm
              key={index}
              config-page-params={configPageParams}
              ref={r => (configPageParams.formRefs[f.ref] = r)}
              options={f.options}
              form-attrs={f.formAttrs}
              v-model:visible={f.visible}
              // @ts-expect-error: Ignore type error for onRowClick
              title={f.title}
              onGetModel={form => (f.form = form)}
              onSubmitForm={f.saveForm.submitForm}
            />
          ))}
          <mDrawer visible={detailsTableData.visible}>
            {{
              content: () => (
                <el-tabs v-model={detailsTableData.activeName} class='self-adaption-tabs' onTabClick={switchoverTabs}>
                  {detailsTableData?.details?.map(f => (
                    <el-tab-pane label={f.detailLabel} name={f.detailName}>
                      <ProTable
                        ref={r => (configPageParams.tableRefs[f.ref] = r)}
                        key={f.ref}
                        columns={f.columns}
                        request-api={f.requestApi}
                        request-auto={f.requestAuto}
                        pagination={f.pagination}
                        initParam={f.initParam}
                        // @ts-expect-error: Ignore type error for onRowClick
                        onRowClick={f.rowClick}
                        dataCallback={f.dataCallback}
                      >
                        {{
                          tableHeader: () => <GlobalButton buttonList={f.headButtonList} />,
                          operation: ({ row }) => <GlobalButton buttonList={f.rowButtonList} rowParams={row} />
                        }}
                      </ProTable>
                    </el-tab-pane>
                  ))}
                </el-tabs>
              )
            }}
          </mDrawer>
        </>
      )}
    </>
  );
};

const switchoverTabs = (pane: TabsPaneContext) => {
  mainData.detailsTableData.activeName = pane.paneName;
  configPageParams.tableRefs[mainData.detailsTableData.activeName].search();
};
</script>
